<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu ref="sidebarMenus" :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false" class="site-sidebar__menu">
        <el-menu-item index="home" @click="$router.push({ name: 'home' })">
          <icon-svg name="home" class="site-sidebar__menu-icon"></icon-svg>
          <span slot="title">首页</span>
        </el-menu-item>
        <main-sidebar-menu v-for="menu in menus" :key="menu.id" :menu="menu" :dynamicMenuRoutes="dynamicMenuRoutes"></main-sidebar-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
import MainSidebarMenu from '@/views/modules/main/main-sidebar-menu'
export default {
  components: {
    MainSidebarMenu
  },
  data() {
    return {
      dynamicMenuRoutes: this.$store.getters.dynamicMenuRoutes
    }
  },
  computed: {
    sidebarLayoutSkin: {
      get() {
        return this.$store.getters.sidebarLayoutSkin
      }
    },
    sidebarFold: {
      get() {
        return this.$store.getters.sidebarFold
      }
    },
    menus: {
      get() {
        return this.$store.getters.menus
      },
      set(val) {
        this.$store.commit('common/SET_MENUS', val)
      }
    },
    menuActiveName: {
      get() {
        return this.$store.getters.menuActiveName
      },
      set(val) {
        this.$store.commit('common/SET_MENUACTIVENAME', val)
      }
    },
    mainTabs: {
      get() {
        return this.$store.getters.mainTabs
      },
      set(val) {
        this.$store.commit('common/SET_MAINTABS', val)
      }
    },
    mainTabsActiveName: {
      get() {
        return this.$store.getters.mainTabsActiveName
      },
      set(val) {
        this.$store.commit('common/SET_MAINTABSACTIVENAME', val)
      }
    },
    menuClear: {
      get() { return this.$store.getters.menuClear },
      set(val) { this.$store.commit('common/SET_MENUCLEAR', val) }
    }
  },
  watch: {
    $route: 'routeHandle',
    menuClear: function (val, oldVal) {
      if (val) {
        this.menuClear = false
        this.$refs.sidebarMenus.activeIndex = null
      }
    }
  },
  created() {
    this.routeHandle(this.$route)
  },
  methods: {
    // 路由操作
    routeHandle(route) {
      if (route.meta.isTab) {
        // tab选中, 不存在先添加
        let tab = this.mainTabs.filter(item => item.name === route.name)[0]
        if (!tab) {
          if (route.meta.isDynamic) {
            route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
            if (!route) {
              return console.error('未能找到可用标签页!')
            }
          }
          tab = {
            name: route.name,
            menuId: route.meta.menuId || route.name,
            title: route.meta.title,
            type: route.meta.type,
            iframeUrl: route.meta.iframeUrl || '',
            isDynamic: route.meta.isDynamic,
            isTab: route.meta.isTab,
            keepAlive: route.meta.keepAlive
          }
          this.mainTabs = this.mainTabs.concat(tab)
        }
        this.menuActiveName = tab.menuId + ''
        this.mainTabsActiveName = tab.name
      }
    }
  }
}
</script>
<style lang="scss">
.site-sidebar {
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  z-index: 1020;
  width: 230px;
  overflow: hidden;

  &__inner {
    position: relative;
    z-index: 1;
    width: 250px;
    height: 100%;
    padding-bottom: 15px;
    overflow-y: scroll;
  }
  &__menu.el-menu {
    width: 230px;
    border-right: 0;
    >.el-menu-item {
      span {
        display: inline-block;
        width: 100px;
        text-align: left;
      }
    }
  }
  &__menu-icon {
    width: 24px;
    margin-right: 5px;
    text-align: center;
    font-size: 16px;
    color: inherit !important;
  }
}
</style>
